import React, { lazy, Suspense } from 'react'
import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom";
import Home from './pages/Home'
// import CityList from "./pages/CityList";
import Index from "./pages/Index";
// import HouseList from './pages/HouseList';
// import News from './pages/News';
// import Profile from './pages/Profile';
// import Map from './pages/Map'
// import Nofount from './pages/NoFound'
// import HouseDetail from './pages/HouseDetail'
// import Login from './pages/Login'
// import Register from './pages/Registe'

//房源发布页面
// import Rent from './pages/Rent/index'
// import RentAdd from './pages/Rent/Add'
// import RentSearch from './pages/Rent/Search'

// 使用动态路由的方式来加载路由
const CityList = lazy(() => import('./pages/CityList'))
// const Index = lazy(() => import("./pages/Index"))
const HouseList = lazy(() => import('./pages/HouseList'))
const News = lazy(() => import('./pages/News'))
const Profile = lazy(() => import('./pages/Profile'))
const Map = lazy(() => import('./pages/Map'))
const Nofount = lazy(() => import('./pages/NoFound'))
const HouseDetail = lazy(() => import('./pages/HouseDetail'))
const Login = lazy(() => import('./pages/Login'))
const Register = lazy(() => import('./pages/Registe'))
const Rent = lazy(() => import('./pages/Rent/index'))
const RentAdd = lazy(() => import('./pages/Rent/Add'))
const RentSearch = lazy(() => import('./pages/Rent/Search'))


function App() {
  return (

    <Router>
      <Suspense fallback={<div className='route-loading'>loading...</div>}>
        <Routes>
          <Route path="/" element={<Navigate to='/home/index' />}></Route>
          <Route  path="/home" element={<Home />}>
            <Route  path='index' element={<Index />}></Route>
            <Route path='list' element={<HouseList />}></Route>
            <Route path='news' element={<News />}></Route>
            <Route path='profile' element={<Profile />}></Route>
          </Route>
          <Route path="/citylist" element={<CityList />}></Route>
          {/* 地图组件 */}

          <Route path="/map" element={<Map />}></Route>
          {/* 房源详情信息   */}
          <Route path="/detail/:id" element={<HouseDetail />}></Route>
          {/* 登录页面 */}
          <Route path="/login" element={<Login />}></Route>
          {/* 注册页面 */}
          <Route path="/register" element={<Register />}></Route>、
          {/* 空白页面 */}
          <Route path="/*" element={<Nofount />}></Route>

          <Route path="/rent" element={<Rent />} ></Route>
          <Route path="/rent/add" element={<RentAdd />}></Route>
          <Route path="/rent/search" element={<RentSearch />}></Route>
        </Routes>
      </Suspense>
    </Router>

  );
}

export default App;
